<template>
  <div class="banner">
    <el-carousel height="300px" motion-blur :autoplay="false">
      <el-carousel-item v-for="item in bannerList" :key="item" style="height: 300px">
        <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
        <img :src="item" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
const props = defineProps({
  itemConfig: {
    type: Object,
    default: () => {}
  }
});
// 轮播图列表
const bannerList = ref<any[]>([
  new URL(".././images/1.jpg", import.meta.url).href,
  new URL(".././images/2.jpg", import.meta.url).href,
  new URL(".././images/3.jpg", import.meta.url).href,
  new URL(".././images/4.jpg", import.meta.url).href
]);
</script>
<style scoped lang="scss">
.banner {
  margin-bottom: 10px;
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
</style>
